<template>
    <d-row :justify="'center'">
        <d-col :md="22" :lg="18">
            <div class="nav">
                <ul ref="nav">
                    <router-link to="/">
                        <li @click="()=>handleClick(1)" :class="{'active': activeNumber === 1}">
                            首页
                        </li>
                    </router-link>
                    <router-link to="/doc/">
                        <li @click="()=>handleClick(2)" :class="{'active': activeNumber === 2}">
                            了解霸凌
                        </li>
                    </router-link>
                    <router-link to="/doc/about/introduce">
                        <li @click="()=>handleClick(3)" :class="{'active': activeNumber === 3}">
                            关于网站
                        </li>
                    </router-link>
                </ul>
            </div>
        </d-col>
    </d-row>
</template>

<style lang="scss" scoped>
div{
    background: #fff;
    position: sticky;
    width: 100%;
    height: 72px;
    z-index: 1;
    div.nav{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        ul{
            li{
                float: left;
                margin-left: 1em;
                font-size: 12pt;
                position: relative;
            }
            li.active::before{
                content:"";
                background: hsl(224deg, 52%, 54%);
                position: absolute;
                width: 100%;
                height: 3px;
                bottom: -3px;
            }
        }
    }
}
</style>

<script lang="ts" setup>
import { useEventHub } from '@/hooks/useEventHub';
import { ref } from 'vue';
const nav = ref(null);
const route = ['index','doc','about'];
const hub = useEventHub();
let activeNumber = ref(1);
hub.on('menu::update', (name: string)=>{
    if (name){
        activeNumber.value = (route.indexOf(name) + 1);
    }
})
const handleClick = (activeId: number) => {
    activeNumber.value = activeId;
}
</script>